<script setup lang="ts">

const props = defineProps({
  icon: {
    type: String,
    default: 'el-icon-bellfilled'
  },
  size: {
    type: String,
    default: '1.5em'
  },
  value: {
    type: [String, Number],
    default: ''
  },
  max: {
    type: Number,
    default: 99
  },
  isDot: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <el-popover placement="bottom" :width="300" trigger="click">
    <template #default>
       <slot>暂无通知!</slot>
    </template>
    <template #reference>
      <el-badge :value="value" :max="max" :is-dot="isDot" class="item">
        <component :is="icon" :style="{ width: size, height: size }"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<style lang="scss" scoped></style>
